<template>
  <div>
      <span>累计确诊人数</span>
      <div class="correspondingBar" v-for="(item, index) in color" :key="index">
        <div class="circle" :style="{background: item.colorNum}"></div>
        <span class="color">{{item.colorSection | numFilter}}</span>
      </div>
  </div>
</template>

<script>
export default {
    props:{
      color:{
        type:Array,
        default:null
      }
    },

    filters: {
      numFilter: value => {
        if (!value) return ''
        if(value === ">4800000"){
          return ">480万"
        }
        if(value === "2400000 ~ 4800000"){
          return "240万 ~ 480万"
        }
        if(value === "1280000 ~ 2400000"){
          return "128万 ~ 240万"
        }
        if(value === "640000 ~ 1280000"){
          return "64万 ~ 128万"
        }
        if(value === "320000 ~ 640000"){
          return "32万 ~ 64万"
        }
        if(value === "160000 ~ 320000"){
          return "16万 ~ 32万"
        }
        if(value === "80000 ~ 160000"){
          return "8万 ~ 16万"
        }
        if(value === "40000 ~ 80000"){
          return "4万 ~ 8万"
        }
        if(value === "20000 ~ 40000"){
          return "2万 ~ 4万"
        }
        if(value === "10000 ~ 20000"){
          return "1万 ~ 2万"
        }
        if(value === "<10000"){
          return "<1万"
        }
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
}
</script>

<style>
.correspondingBar{
  text-align: left;
  
}
.circle{
  border-radius: 50%;
	width: 10px;
	height: 10px; 
  border: 1px solid black;
  display: inline-block;
}
.color{
  margin-left: 10px;
  text-align: left;
  color: #000;
}
</style>